<template>
  <div class="ysqjcdp-map-legend">
    <div
      class="expand-top-container"
      :style="{width: contentWidth}"
      v-show="visible"
    >
      <div
        class="f-12 m-b-mini c-gray-blue"
      >
        雨量：（mm）
      </div>
      <div
        v-for="(item, index) in list"
        :key="index"
        :item="item"
        class="ysqjcdp-map-legend-item"
        @click="toggleLayerVisible(item)"
      >
        <div
          class="color-rect"
          :style="{color:item.color}"
        />
        <span :class="['ysqjcdp-legend-item-text', 'c-gray-blue']">{{ item.name }}</span>
      </div>
    </div>
    <div
      class="flex-0 legend-toggle-button"
      @click="visible = !visible"
      :style="{width: contentWidth}"
    >
      图 例<i :class="['m-l-tiny', visible ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" />
    </div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import { debounce } from 'throttle-debounce'
export default {
  name: 'YsqjcdpMapLegend',
  props: {
    isGlobal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visibleLayerMap: {},
      visible: true,
      contentWidth: '111px',
      list: [
      //   {
      //   name: '400.0',
      //   color:'#F90000',
      // },
      // {
      //   name: '250.0',
      //   color:'#FAA502',
      // },
        {
          name: '>100.0',
          color: 'rgb(183,3,179,1)'
        },
        {
          name: '80 ~ 100',
          color: 'rgb(255,128,255,1)'
        },
        {
          name: '60 ~ 80',
          color: 'rgb(0,0,255,1)'
        }, {
          name: '40 ~ 60',
          color: 'rgb(0,255,255,1)'
        }, {
          name: '20 ~ 40',
          color: 'rgb(0,213,106,1)'
        },
        {
          name: '<20',
          color: 'rgb(170,255,191,1)'
        }
      ],
      rainLayerVsible: true
    }
  },
  computed: {
  },
  created () {
    this.debouncedSyncLayerVisibleInfo = debounce(50, this.syncLayerVisibleInfo)
    this.$mapManager.addEventListener('updateLayer', this.debouncedSyncLayerVisibleInfo)
  },
  beforeDestroy () {
    this.$mapManager.removeEventListener('updateLayer', this.debouncedSyncLayerVisibleInfo)
  },
  watch: {
    list: {
      immediate: true,
      handler () {
        this.syncLayerVisibleInfo()
      }
    }
  },
  methods: {
    async syncLayerVisibleInfo () {
      // if (!this.list || !this.$mapManager.getMapComponent()?.map1) return
      // const visibleLayerMap = {}
      // const allLayerIds = this.$mapManager.getMapComponent().map1.layerManager.getAllLayer()
      // for (const l of this.list) {
      //   if (allLayerIds.includes(l.layerId)) {
      //     visibleLayerMap[l.layerId] = (await this.$mapManager.invokeUtils('getLayer', l.layerId)).getVisible()
      //   } else {
      //     visibleLayerMap[l.layerId] = true
      //   }
      // }
      // this.visibleLayerMap = visibleLayerMap
    },
    async toggleLayerVisible (item) {
      // const layer = await this.$mapManager.invokeUtils('getLayer', item.layerId)
      // if (!layer) return
      // const visible = !this.visibleLayerMap[item.layerId]
      // if (layer.get('hasCluster')) {
      //   this.$mapManager.invoke('setLayerVisible', item.layerId + '_cluster', visible)
      // }
      // this.$mapManager.invoke('setLayerVisible', item.layerId, visible)
      // this.visibleLayerMap[item.layerId] = visible

      // if (this.visibleLayerId !== item.layerId || ((this.visibleLayerId === item.layerId) && !visible)) {
      //   this.$store.commit('ysqxx/setVisibleLayerId', '')
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.ysqjcdp-map-legend {
  .expand-top-container {
    position: absolute;
    z-index: 1;
    background: #042976b8;
    border: 1px solid #0386c873;
    border-radius: 6px;
    padding: 10px 8px;
    bottom: 29px;
    left: 0;
  }

  .legend-toggle-button {
    background: #042976b8;
    border: 1px solid #0386c873;
    color: #dbeffd;
    border-radius: 6px;
    font-size: 14px;
    height: 28px;
    padding: 7px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .ysqjcdp-map-legend-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    // cursor: pointer;
    justify-content: space-between;

    .color-rect {
      width: 16px;
      height: 11px;
      background: currentcolor;
    }

    .ysqjcdp-legend-item-text {
      font-size: 12px;
      // margin-right: 5px;
    }
  }
}

</style>
